(function(window, undefined) { //兼容ie
    let t = null //为提升用户体验，此处应该用节流
    $.fn.lazyLoad = function() { //给jq添加原型方法
        let imgs = this //节流定时器会改变this指向，故提前获取this，指向jq对象
        function lazyLoad() { //封装开始
            if (t) return
            t = setTimeout(() => {
                // 
                let windowH = window.innerHeight || document.documentElement.clientHeight
                let scrollH = document.body.scrollTop || document.documentElement.scrollTop
                let showH = windowH + scrollH //可视区域最大高度 = 滚轮高度+页面高度
                    // 2 获取所有图片，遍历，判断高度
                for (let i = 0; i < imgs.length; i++) {
                    if (imgs[i].offsetTop < showH) { //如果图片距离页面左上角高度小于可视区高度，则加载发送请求
                        imgs[i].src = imgs[i].getAttribute('data-src') //返回指定属性
                    }
                }
                t = null
            }, 500)
        }
        lazyLoad() //一开始就触发一次
        window.onscroll = lazyLoad //检测到鼠标滚动的时候会触发
    }
})(window)

// 以京东为例，很多人打开网页只会浏览最上面的部分，然后点击搜索等地，为加快网页加载速度，提高性能，因为对图片进行懒处理
// 即当图片出现在可视区内的时候，才发送请求加载图片
// 实现路径：先对图片设置loading地址，将真实地址隐藏在行内属性，当需要加载的时候，真实地址覆盖loading地址

// 完成思路
// 1、完成功能
//     1.1 获取可视区高度：窗口高度 + 滚动高度=h1
//     1.2 获取图片距离网页左上角高度h2
//     1.3 遍历所有图片
//     1.4 做判断，如果h2<h1则对图片进行地址替换处理
// 2、优化，滚轮滑动会不断触发，因为做节流处理
// 3、将1放进2
// 4、对优化后功能进行封装，成为jq的原型方法